<script setup>
import {  Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router=useRouter()
function goHome(){
    router.push('/')
}
</script>
<template>
    <nav class="nav">
        <div class="logo">
            网校
        </div>
        <div class="nav-items">
            <a class="home" @click="goHome">首页</a>
        <a href="" class="video">直播</a>
        <a href="" class="app">App </a>
            <el-input type="text" class="search-input" :icon="Search"/>
        
        <a href="">学习中心</a>
        <el-button type="primary" round class="btn">登录</el-button>
        <el-button type="primary" round class="btn">注册</el-button>
        </div>

    </nav>
</template>
<style scoped>

.nav{
    --padding-left-right:160px;
    --logo-width:350px;
    font-size: 18px;
    height: 115px;
    padding: 25px var(--padding-left-right);
}
.nav .home{
    color: #649cf0;
}
.nav .logo{
    display: inline-block;
    width: var(--logo-width);
}
.nav a {
    color: black;
    position: relative;
}
.nav a:hover{
    color: #649cf0;
}
.nav a::after{
    content: '';
    position: absolute;
    
    width: 100%;
    height: 3px;
    background-color: blue;
    display: block;
    opacity: 0;
    transition: opacity 0.3s linear;
    bottom: -5px;
    left: 0;
}
.nav a:hover::after{
    opacity: 1;
}
.nav-items{
    width: calc(100% - var(--logo-width));
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
}
.btn{
    padding: 3px 20px;
}
.search-input{
    width: 335px;
}
</style>